<template>
  <div class="add_dialog">
    <el-dialog title="问题反馈详情" :visible.sync="dialogVisible" :close-on-click-modal="false" width="1000px" @close="close" :close-on-press-escape="false">
      <div class="">
        <el-descriptions title="" border :column="2">
          <el-descriptions-item label="店铺名称">{{form.tenantName}}</el-descriptions-item>
          <el-descriptions-item label="反馈类型">{{form.type}}</el-descriptions-item>
          <el-descriptions-item label="反馈时间">{{form.createTime}}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{form.lianxifangshi}}</el-descriptions-item>
          <el-descriptions-item label="反馈内容" :span="2">
            {{form.content}}
          </el-descriptions-item>

          <el-descriptions-item label="图片" :span="2">
            <div class="img-box flex">
              <div v-for="(item, ind) in imgFileList" :key="item">
                <img :src="item" @click="review(imgFileList,ind)" />
              </div>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="视频" v-if="form.video" :span="2">
            <video :src="form.video" style="width:400px;height: 300px;" controls></video>
          </el-descriptions-item>
          <el-descriptions-item label="处理结果">{{form.result||'暂无'}}</el-descriptions-item>
        </el-descriptions>
        <div style="height:20px" v-if="checkPermi(['yijianfankui:chuli'])"></div>
        <el-form ref="form" :model="ruleForm" :inline="false" :rules="rules" label-width="100px" class="demo-ruleForm">

          <el-form-item v-if="checkPermi(['yijianfankui:chuli'])" label="处理结果" prop="result" class="">
            <el-input type="textarea" v-model="ruleForm.result" placeholder="请输入处理结果，最多500个字" maxlength="500" show-word-limit :rows="3" style="width:600px" />
          </el-form-item>
        </el-form>
        <div class="center" v-if="checkPermi(['yijianfankui:chuli'])">
          <el-button class="font16" plain type="" @click="close">关闭 </el-button>
          <el-button type="primary" @click="submitForm" :loading="loading">确认提交</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import fankuiApi from "@/api/PCWebImages/fankui.js";
export default {
  name: "",
  components: {},
  data() {
    return {
      loading: false,
      dialogVisible: false,
      btnLoading: false,
      form: {},
      ruleForm: {
        result: "",
      },

      imgFileList: [],
      rules: {
        result: [
          { required: true, message: "请输入处理结果", trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    tenantInfo() {
      return this.$store.getters.shopInfo;
    },
  },
  methods: {
    open(id) {
      this.dialogVisible = true;
      fankuiApi.getProblemFeedback(id).then((res) => {
        this.form = res.data;
        this.ruleForm.id = this.form.id;
        this.ruleForm.result = this.form.result || "";
        this.imgFileList = [];
        if (this.form.img) {
          let arrimg = JSON.parse(this.form.img);
          if (arrimg.length > 0) {
            arrimg.forEach((img) => {
              this.imgFileList.push(img.url);
            });
          }
        }
      });
    },
    // 连续图片预览
    review(list, ind) {
      this.$viewerApi({
        images: list,
        options: {
          initialViewIndex: ind,
        },
      });
    },
    // 重置
    reset() {
      this.$refs["form"].resetFields();
    },

    // 提交
    submitForm() {
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          // 二次确认
          this.$confirm(`确定提交处理结果吗？`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              fankuiApi.problemFeedbackEdit(this.ruleForm).then((res) => {
                if (res.code == 200) {
                  this.$message.success(res.msg);
                  this.close();
                  this.$parent.getList();
                }
              });
            })
            .catch(() => {});
        } else {
          this.$alert("请填写完整！");
        }
      });
    },
    close() {
      this.reset();
      this.dialogVisible = false;
    },
  },
};
</script>
<style scoped lang="scss">
.img-box {
  img {
    width: 100px;
    margin-right: 10px;
    margin-bottom: 10px;
  }
}
</style>
